<template>
  <div class="container">
    <div id="box" class="box">
      <div class="img">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- 编写form el-form 表单整体  rules 需要是一个对相关,对象的字段和model的字段要一样 -->
      <el-form ref="userformRef" hide-required-asterisk :model="userform" :rules="rulesObj" label-width="80px">
        <!-- 子类 -->
        <el-form-item prop="username">
          <!-- prefix-icon 前边添加图标 -->
          <!-- suffix-icon 后边添加图标 -->
          <el-input prefix-icon="el-icon-user-solid" v-model="userform.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" suffix-icon="el-icon-s-goods" v-model="userform.password"></el-input>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submit">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';
// 拿不到,
export default {
  // vd
  data () {
    return {
      userform: {
        username: 'admin',
        password: '123456'
      },
      // 字段名称和form的要一样
      rulesObj: {
        username: [
          // required: true 必填,message:错误信息,trigger 失去焦点触发
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          // 最小字数,最大字数
          { min: 5, message: '长度在 5 个字符以上', trigger: 'blur' }
        ],
        // type: 'date' 数据类型
        password: [
          { required: true, message: '输入密码', trigger: 'blur' },
          { pattern: /\d{6}/, message: '6位以上的字母', trigger: 'blur' }
          // { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  // 设置所有的方法
  methods: {
    submit () {
      // ref 放到组件||标签 能够获取到组件|don对象,比doucmeng,queryselect
      this.$refs.userformRef.validate(async (validate, prop) => {
        // 没有校验通过
        if (!validate) {
          return this.$message.error('校验出错');
        }
        // console.log(validate, prop);
        // 当前是true 提交数据到后台
        // 缺陷,一旦跟换后台地址,查找麻烦
        const { data: { data, meta } } = await request({
          url: '/login',
          method: 'POST',
          data: this.userform
        })
        // console.log(data);
        // 返回的信息是 正确
        if (meta.status !== 200) {
          return this.$message.error(meta.msg);
        }
        // 保存数数据,用户名和密码
        sessionStorage.setItem("token", data.token)
        // 提示信息
        this.$message({
          message: meta.msg,
          type: 'success'
        });
        // 跳转到主页
        this.$router.push("/home")
        // back.then((data) => {
        //   console.log(data);
        // })
        // axios.post('http://127.0.0.1:8888/api/private/v1/login', this.userform)
      })
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding-top: 200px;
  height: 100%;
  background-color: #2B4B6B;

  .box {
    position: relative;
    left: 0;
    top: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    width: 450px;
    height: 310px;
    margin: auto;
    background-color: #fff;

    .img {
      // x,y 阴影大小,阴影范围,颜色
      box-shadow: 0 0 10px #ddd;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 50%;
      padding: 10px;
      // 超出父类,隐藏
      overflow: hidden;
      position: absolute;
      left: 50%;
      // 移动
      transform: translate(-50%, -50%);
      width: 150px;
      height: 150px;

      img {
        width: 100%;
        height: 100%;
        background-color: #EEEEEE;
        border-radius: 50%;
      }
    }

    .el-form {
      margin-top: 100px;
    }

    .el-form-item {
      width: 400px;
    }
  }
}
</style>
